import React from 'react';
import { ClipPath, Defs, Rect } from 'react-native-svg';
import { LineChart, Path } from 'react-native-svg-charts';
import colors from '../../../../../styles/colors';

class PartialLineChartExample extends React.PureComponent {

  render() {

    const data = [ 50, 10, 40, 95, -4, -24, 85, 91, 35, 53, -53, 24, 50, -20, -80 ]

    const indexToClipFrom = 10

    const Clips = ({ x, width }) => (
      <Defs key="clips">
        <ClipPath id="clip-path-1">
          <Rect x="0" y="0" width={ x(indexToClipFrom) } height="100%" />
        </ClipPath>
        <ClipPath id="clip-path-2">
          <Rect x={ x(indexToClipFrom) } y="0" width={ width - x(indexToClipFrom) } height="100%" />
        </ClipPath>
      </Defs>
    )

    // Line extras:
    const DashedLine = ({ line }) => (
      <Path
        key="line-1"
        d={line}
        stroke={colors.blue}
        strokeWidth={2}
        fill="none"
        strokeDasharray={[ 4, 4 ]}
        clipPath="url(#clip-path-2)"
      />
    )

    const Shadow = ({ line }) => (
      <Path
        y={3}
        key="shadow-1"
        d={line}
        stroke={colors.green}
        opacity={0.2}
        strokeWidth={5}
        fill="none"
      />
    )

    return (
      <LineChart
        style={{ height: 200 }}
        data={data}
        contentInset={{ top: 20, bottom: 20 }}
        svg={{
          stroke: colors.primary,
          strokeWidth: 2,
          clipPath: 'url(#clip-path-1)',
        }}
      >
        <Clips />
        <Shadow />
        <DashedLine />
      </LineChart>
    )
  }
}

export default PartialLineChartExample
